<template>
  <div class="main">
    <div class="toolbar">
      <el-row>
        <el-divider direction="vertical"></el-divider>
        <el-button type="text"
                   size="mini"
                   @click="showCreateDatasource()">新建分组</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button type="text"
                   size="mini"
                   @click="showSearchDialog()">新建数据源</el-button>
        <el-divider direction="vertical"></el-divider>
      </el-row>
    </div>
    <div class='left'>
      <VelTree :size="size"
               :hasInput="true"
               :inputPlaceHolder="inputPlaceHolder"
               :treeData="treeData"
               :emptyText="emptyText"
               :defaultProp="defaultProps"
               :nodeKey="nodeKey"
               :defaultExpandAll="false"
               :iconClass="iconClass"></VelTree>
    </div>
    <div class='right'>
      <div class="table"
           style="height:calc(100% - 40px)">
        <vxe-table border
                   height="100%"
                   :data="tableData">
          <vxe-table-column type="seq"
                            width="60"></vxe-table-column>
          <vxe-table-column field="datasourceName"
                            title="名称"></vxe-table-column>
          <vxe-table-column field="datasourceCode"
                            title="编码"></vxe-table-column>
          <vxe-table-column field="groupName"
                            title="分组名称"></vxe-table-column>
          <vxe-table-column field="groupCode"
                            title="分组编码"></vxe-table-column>
          <vxe-table-column field="datasourceType"
                            title="类型"></vxe-table-column>
          <vxe-table-column field="url"
                            show-overflow
                            title="url"></vxe-table-column>
          <vxe-table-column field="instanceName"
                            title="实例名"></vxe-table-column>
          <vxe-table-column field="password"
                            title="密码"></vxe-table-column>
        </vxe-table>
      </div>
      <!-- 分页组件 -->
      <vxe-pager background
                 :current-page.sync="page.pageNumber"
                 :page-size.sync="page.pageSize"
                 :total="page.total"
                 :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
      </vxe-pager>
    </div>

    <el-dialog title="新建分组"
               :visible.sync="newGroupDialog"
               width="500px">
      <el-form :model="groupForm"
               size="mini">
        <el-form-item label="分组编码"
                      label-width="120px">
          <el-input v-model="groupForm.groupCode"></el-input>
        </el-form-item>
        <el-form-item label="分组名称"
                      label-width="120px">
          <el-input v-model="groupForm.groupCode"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="父级分组"
                      label-width="120px">
          <VinputSelectTree dialogTitle="选择分组"
                            :inputContent="inputContent"
                            :inputPlaceHolder="inputPlaceHolder"
                            :hasInput="true"
                            :clearable="true"
                            :size="size"
                            :treeData="treeData"
                            :emptyText="emptyText"
                            :defaultProp="defaultProps"
                            :nodeKey="nodeKey"
                            modal-append-to-body="false"></VinputSelectTree>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="cancleNewGroupDialog">取 消</el-button>
        <el-button type="primary"
                   @click="okNewGroupDialog">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { getTreeData } from '../../api/datasource'
export default {
  components: {
  },
  data () {
    return {
      size: "small",
      inputPlaceHolder: '输入关键字查询',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeData: [],
      emptyText: '没有数据',
      nodeKey: 'id',
      iconClass: '',
      filterFields: 'code||name',
      // 表格数据
      tableData: [],
      page: {
        pageNumber: 1,
        pageSize: 10,
        total: 0
      },

      newGroupDialog: false,
      groupForm: {
      },
      paretnGroup: {
        id: '',
        groupName: '',
        groupCode: ''
      },
      inputContent: ''
    }
  },
  created () {
    this.initTreeData();
    this.initTableData();
  },
  computed: {

  },
  methods: {
    initTreeData () {
      getTreeData('/lowcode/model/tree', { "extInfo": { "type": "MODEL" } }, 'post', 'core').then(res => {
        if (res.code == 200) {
          this.treeData = res.data
        }
      })
    },
    initTableData () {
      let param = {

      }
      Object.assign(param, this.page)
      this.$requireData('/lowcode/model/datasource/page', param, 'post', 'core').then(res => {
        if (res.code === 200) {
          this.tableData = res.data
          this.page.pageNumber = res.pageNumber
          this.page.pageSize = res.pageSize
          this.page.total = res.total
        } else {
          this.$message.error(res.message)
        }
      })
    },
    showCreateDatasource () {
      this.newGroupDialog = true
    },
    cancleNewGroupDialog () {
      this.newGroupDialog = false

    },
    okNewGroupDialog () {
      this.newGroupDialog = false

    }

  }
}
</script>
<style scoped>
.main {
  width: 100%;
  height: calc(100% - 38px);
  display: flex;
  flex-wrap: wrap;
  padding: 4px;
}
.toolbar {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.left {
  width: 23%;
  padding: 10px 5px 10px 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.right {
  padding: 10px 0px 10px 0px;
  margin-left: 10px;
  width: calc(77% - 29px);
  height: calc(100% - 20px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.v-eltree >>> .el-tree {
  margin-top: 8px;
}

.v-input-select-tree >>> .el-dialog {
  width: 400px;
}
</style>